<template>
    <div id="first">
        <div id="report">
            <el-row :gutter="20">
                <el-col :span="24">
                    <el-card shadow="hover" class="mgb20">
                        <span style="font-size: 18px">资产概况：</span><span style="font-size: 14px">统计截止时间：{{date}}</span>
                        <center>
                       <span  style="color: #129f4b;font-size: 18px" >总支出：{{zzc}}元&nbsp;&nbsp;</span>
                            |
                            <span style="color: red;font-size: 18px">&nbsp;&nbsp;总收入：{{zsr}}元&nbsp;&nbsp;</span>
                            |
                            <span style="font-size: 18px">&nbsp;&nbsp;结余：{{zsr-zzc}}元</span>
                        </center>
                    </el-card>
                </el-col>
                <el-col :span="12">
                    <el-card shadow="hover" class="mgb20">
                        <template #header>
                            <div class="clearfix">
                                <span style="font-size: 16px">支出堆积图</span>
                            </div>
                        </template>
                        <div
                                style="height: 280px; width: 556px"
                                id="myChart"
                                ref="myChart"
                        ></div>
                    </el-card>
                </el-col>
                <el-col :span="12">
                    <el-card shadow="hover" class="mgb20">
                        <template #header>
                            <div class="clearfix">
                                <span style="font-size: 16px">收入堆积图</span>
                            </div>
                        </template>
                        <div
                                style="height: 280px; width: 556px"
                                id="outmoney"
                                ref="outmoney"
                        ></div>
                    </el-card>
                </el-col>
                <el-col :span="12">
                    <el-card shadow="hover" class="mgb20">
                        <template #header>
                            <div class="clearfix">
                                <span style="font-size: 16px">支出方式统计</span>
                            </div>
                        </template>
                        <div
                                style="height: 280px; width: 556px"
                                id="bingtu"
                                ref="bingtu"
                        ></div>
                    </el-card>
                </el-col>
                <el-col :span="12">
                    <el-card shadow="hover" class="mgb20">
                        <template #header>
                            <div class="clearfix">
                                <span style="font-size: 16px">收入方式统计</span>
                            </div>
                        </template>
                        <div
                                style="height: 280px; width: 556px"
                                id="getmoney"
                                ref="getmoney"
                        ></div>
                    </el-card>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>

    import {getzcfs, getzclb, getsrfs, getsrlb, getSz} from '@/api'
    import { mapState,mapGetters } from "vuex";
    export default {
        data() {
            return {
                zsr:"",
                zzc:"",
                date:"",
                queryinfo:'',
                page:1,
                pageSize:10,
                activeTab: "keepAccounts", // 默认展示记账页
                withdrawform: {
                    name: "",
                    money: "",
                    region: "",
                },
                savingform: {
                    is_delete: "false",
                    record_day: "",
                    record_desc: "",
                    price:"",
                    mg_id:"",
                },
                goalform: {
                    is_delete:"false",
                    goal_price:"",
                    user_id:"",
                    goal_desc:"",
                },
                accountList: {
                    manner: "", //方式：支出（1），收入（2）
                    type_name: "", //类别名称：购物（1），饮食（2），生活（3），缴费（4），其他（5）
                    cost_details: "", //账单详情描述
                    money: "", //金额
                    payment: "", //支付方式：现金（1），支付宝（2），微信（3），其它（4）
                    create_time: "", //创建时间
                    info_id: "", //关联用户表的id
                    _id:"",
                },
                mannerOptions: [
                    { id: "1", label: "支出" },
                    { id: "2", label: "收入" },
                ],
                typenameOptions: [
                    { id: "1", label: "购物" },
                    { id: "2", label: "饮食" },
                    { id: "3", label: "生活" },
                    { id: "4", label: "缴费" },
                    { id: "5", label: "其他" },
                ],
                paymentOptions: [
                    { id: "1", label: "现金" },
                    { id: "2", label: "支付宝" },
                    { id: "3", label: "微信" },
                    { id: "4", label: "其他" },
                ],
                formLabelWidth: "120px",
                dialogFormVisible: false,
                savingdialogFormVisible: false,
                withdrawdialogFormVisible: false,
                goaldialogFormVisible: false,
                multipleSelection:[],
                value: "",
                ids:[],
            };
        },
        mounted() {
            this.$bus.$on('statistics',res=>{
                this.drawLine();
                this.drawoutmaoeny();
                this.drawbingtu();
                this.drawgetmoney();
                this.getSz();
            })
            this.drawLine();
            this.drawoutmaoeny();
            this.drawbingtu();
            this.drawgetmoney();
            this.getSz();
        },
        methods: {
            getSz(){
                var myDate = new Date();
               this.date=myDate.toLocaleString( );
                getSz(this.userInfo._id).then(res=>{
                    if (res.data.code===200){
                        this.zzc=res.data.data.expand[0].expand_price
                        this.zsr=res.data.data.income[0].income_price
                    }
                })
            },
            drawLine() {
                getzclb(this.userInfo._id).then(res=>{
                    let data=res.data.data;
                    let  dataName=[];
                    let dataValue=[];
                    for (let i = 0; i < data.length; i++) {
                        dataName.push(data[i].type_name)
                        dataValue.push(data[i].expenditure_price)
                    }
                    let myChart_dv = this.$refs.myChart;
                    if (myChart_dv) {
                        let myChart = this.$echarts.init(myChart_dv);
                        // 绘制图表
                        let  option = {
                            xAxis: {
                                type: 'category',
                                data: dataName
                            },
                            yAxis: {
                                type: 'value'
                            },
                            series: [
                                {
                                    data: dataValue,
                                    type: 'bar',
                                    showBackground: true,
                                    backgroundStyle: {
                                        color: 'rgba(180, 180, 180, 0.2)'
                                    }
                                }
                            ]
                        };
                        myChart.setOption(option);
                    }
                })

            },
            drawoutmaoeny() {
                getsrlb(this.userInfo._id).then(res=>{
                    let data=res.data.data;
                    let  dataName=[];
                    let dataValue=[];
                    for (let i = 0; i < data.length; i++) {
                        dataName.push(data[i].type_name)
                        dataValue.push(data[i].income_price)
                    }
                    let outmoney_dv = this.$refs.outmoney;
                    if (outmoney_dv) {
                        let myChart = this.$echarts.init(outmoney_dv);
                        // 绘制图表
                        let  option = {
                            xAxis: {
                                type: 'category',
                                data: dataName
                            },
                            yAxis: {
                                type: 'value'
                            },
                            series: [
                                {
                                    data: dataValue,
                                    type: 'bar',
                                    showBackground: true,
                                    backgroundStyle: {
                                        color: 'rgba(180, 180, 180, 0.2)'
                                    }
                                }
                            ]
                        };
                        myChart.setOption(option);
                    }
                })
            },
            drawbingtu() {
                getzcfs(this.userInfo._id).then(res=>{

                    let data=res.data.data.map(res=>{
                        return{
                            value:res.expenditure_price,
                            name:res.payment
                        }
                    })
                    let bingtu_dv = this.$refs.bingtu;
                    if (bingtu_dv) {
                        let bingtu = this.$echarts.init(bingtu_dv);
                        // 绘制图表
                        bingtu.setOption({
                            title: {
                                text: "",
                                subtext: "",
                                left: "center",
                            },
                            tooltip: {
                                trigger: "item",
                            },
                            legend: {
                                orient: "vertical",
                                left: "left",
                            },
                            series: [
                                {
                                    name: "Access From",
                                    type: "pie",
                                    radius: "50%",
                                    data: data,
                                    emphasis: {
                                        itemStyle: {
                                            shadowBlur: 10,
                                            shadowOffsetX: 0,
                                            shadowColor: "rgba(0, 0, 0, 0.5)",
                                        },
                                    },
                                },
                            ],
                        });
                    }
                })

            },
            drawgetmoney() {
                getsrfs(this.userInfo._id).then(res=>{

                    let data=res.data.data.map(res=>{
                        return{
                            value:res.income_price,
                            name:res.payment
                        }
                    })
                    let bingtu_dv = this.$refs.getmoney;
                    if (bingtu_dv) {
                        let bingtu = this.$echarts.init(bingtu_dv);
                        // 绘制图表
                        bingtu.setOption({
                            title: {
                                text: "",
                                subtext: "",
                                left: "center",
                            },
                            tooltip: {
                                trigger: "item",
                            },
                            legend: {
                                orient: "vertical",
                                left: "left",
                            },
                            series: [
                                {
                                    name: "Access From",
                                    type: "pie",
                                    radius: "50%",
                                    data: data,
                                    emphasis: {
                                        itemStyle: {
                                            shadowBlur: 10,
                                            shadowOffsetX: 0,
                                            shadowColor: "rgba(0, 0, 0, 0.5)",
                                        },
                                    },
                                },
                            ],
                        });
                    }
                })
            },

        },

        computed: {
            ...mapState({
                //从数据仓库中取出数据
                billList: (state) => state.bill.billList.note,
                total:(state) => state.bill.billList.total,
            }),
            ...mapGetters(['userInfo'])
        },
    };
</script>

<style>
    .btn_margin {
        margin-left: 19px;
    }

    .demo-table-expand {
        font-size: 0;

    }

    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }

    .demo-table-expand .el-form-item {
        margin-left: 30px;
        margin-bottom: 0;
        width: 50%;
    }
</style>